<template>
  <div class="stats-container">
    <div class="stats-grid">
      <div
          v-for="(item, index) in statsItems"
          :key="index"
          class="stats-item"
          :style="{ 'border-left-color': item.color  }"
      >
        <div class="stats-icon" :style="{ background: `${item.color}20`,  color: item.color  }">
          <i :class="item.icon"></i>
        </div>
        <div class="stats-content">
          <div class="stats-title">{{ item.title }}</div>
          <div class="stats-value">
            {{ formatValue(item.value, item.unit) }}
            <span class="stats-unit">{{ item.unit }}</span>
          </div>
        </div>
        <div
            class="stats-trend"
            :class="{
              'up': item.trend  > 0,
              'down': item.trend  < 0,
              'flat': item.trend  === 0
            }"
        >
          <span>{{ formatTrend(item.trend) }}</span>
          <i
              :class="{
                'el-icon-top': item.trend  > 0,
                'el-icon-bottom': item.trend  < 0,
                'el-icon-minus': item.trend  === 0
              }"
          ></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    summaryData: {
      type: Object,
      required: true,
      default: () => ({
        totalTests: 0,
        passRate: 0,
        failCount: 0,
        deviceCount: 0,
        monthlyTests: 0,
        activityRate: 0,
        testTrend: 0,
        rateTrend: 0,
        failTrend: 0,
        deviceTrend: 0,
        monthlyTrend: 0,
        issueTrend: 0
      })
    }
  },
  computed: {
    statsItems() {
      return [
        {
          title: '累计检测',
          value: this.summaryData.totalTests,
          trend: this.summaryData.testTrend,
          unit: '次',
          icon: 'el-icon-s-data',
          color: '#36a3f7'
        },
        {
          title: '合格率',
          value: this.summaryData.passRate,
          trend: this.summaryData.rateTrend,
          unit: '%',
          icon: 'el-icon-success',
          color: '#19be6b'
        },
        {
          title: '不合格',
          value: this.summaryData.failCount,
          trend: this.summaryData.failTrend,
          unit: '批次',
          icon: 'el-icon-error',
          color: '#ed4014'
        },
        {
          title: '本月检测',
          value: this.summaryData.monthlyTests,
          trend: this.summaryData.monthlyTrend,
          unit: '次',
          icon: 'el-icon-timer',
          color: '#ff9900'
        },
        {
          title: '设备数',
          value: this.summaryData.deviceCount,
          trend: this.summaryData.deviceTrend,
          unit: '台',
          icon: 'el-icon-odometer',
          color: '#9a66e4'
        },
        {
          title: '活跃度',
          value: this.summaryData.activityRate,
          trend: this.summaryData.activityTrend,
          unit: '%',
          icon: 'el-icon-warning',
          color: '#f25e43'
        },

      ]
    }
  },
  methods: {
    formatTrend(trend) {
      if (trend > 0) return `+${trend}%`
      if (trend < 0) return `${trend}%`
      return '0%'
    },
    formatValue(value, unit) {
      if (unit === '%') {
        return value.toFixed(1)
      }
      if (value >= 10000) {
        return (value / 10000).toFixed(1) + '万'
      }
      return value
    }
  }
}
</script>

<style scoped>
.stats-container {
  width: 100%;
  height: 100%;
  padding: 10px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  backdrop-filter: blur(8px);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.stats-item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 20px 16px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  border-radius: 10px;
  border-left: 5px solid;
  transition: all 0.3s ease;
  height: 100px;
  overflow: hidden;
}

.stats-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0%, transparent 100%);
  opacity: 0.5;
}

.stats-item:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.stats-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  border-radius: 12px;
  font-size: 22px;
  flex-shrink: 0;
}

.stats-content {
  flex: 1;
  min-width: 0;
}

.stats-title {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.stats-value {
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  white-space: nowrap;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  font-family: 'Arial', sans-serif;
}

.stats-unit {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  margin-left: 4px;
  font-weight: normal;
}

.stats-trend {
  display: flex;
  align-items: center;
  font-size: 14px;
  margin-left: 8px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
}

.stats-trend i {
  margin-left: 4px;
  font-size: 14px;
}

.stats-trend.up {
  color: #19be6b;
  background: rgba(25, 190, 107, 0.15);
}

.stats-trend.down {
  color: #ed4014;
  background: rgba(237, 64, 20, 0.15);
}

.stats-trend.flat {
  color: #ff9900;
  background: rgba(255, 153, 0, 0.15);
}
</style>